﻿<div class="main-header">
 <div class="main-title">combox控件示例</div>
</div>
<h2>combox控件示例-只有文本</h2>
<div class ="main-content">
 <table class="formtable">
   <tr>
       <td  style="width:60px;" align="right" >只是文本</td>
       <td  style="width:150px;" align="left"><input type="text" id="txtCombo1"/></td>
       <td  style="width:150px;" align="right">选中文本为aa4的项</td>
       <td   align="left"><div><input type="text" id="txtCombo11"/></div></td>
       
    </tr>
    
 </table>
</div>
<h2>combox控件示例-文本与值</h2>
<div class ="main-content">
 <table class="formtable">  
     <tr>
       <td style="width:60px;" align="right" >文本与值</td>
       <td style="width:150px;" align="left"><input type="text" id="txtCombo2"/></td>
       <td style="width:150px;" align="right">选中值为4的项</td>
       <td  align="left"><div><input type="text" id="txtCombo22"/></div></td>
    </tr>
 </table>
</div>
<script type="text/javascript">
    $(function() {
        var storeTextAndValue =
            {
                fields: { "text": "Text", "value": "Value" },
                data: [
                        { "Text": "fddddd4", "Value": 1 },
                        { "Text": "ba2", "Value": 2 },
                        { "Text": "aa3", "Value": 3 },
                        { "Text": "aa4", "Value": 4 },
                        { "Text": "aa5", "Value": 5 },
                        { "Text": "aa6", "Value": 6 },
                        { "Text": "aa7", "Value": 7 },
                        { "Text": "aa8", "Value": 8 }
                      ]
            }
        var storeOnlyText =
            {
                fields: { "text": "Text" },
                data: [
                        { "Text": "fddddd4" },
                        { "Text": "ba2" },
                        { "Text": "aa3" },
                        { "Text": "aa4" },
                        { "Text": "aa5" },
                        { "Text": "aa6" },
                        { "Text": "aa7" },
                        { "Text": "aa8" }
                      ]
            }
        var combox1 = $("#txtCombo1").combox({ store: storeOnlyText, selectedChange: show });
        var combox11 = $("#txtCombo11").combox({ store: storeOnlyText, selectedChange: show, selectedItem: { "Text": "aa4"} });
        var combox2 = $("#txtCombo2").combox({ store: storeTextAndValue, selectedChange: show });
        var combox22 = $("#txtCombo22").combox({ store: storeTextAndValue, selectedChange: show, selectedItem: { "Text": "aa4注意：这是可以乱写", "Value": 4} });
        function show(text, val) {
            alert("调用selectedChange,Text:" + text + "|Value:" + (val == "" ? "值为空" : val));
        }


    })
    
    </script>